<template>
  <div class="subscribe-component">
    <div class="subscribe" v-for="(item,i) in listData" :key="i">
      <template >
      <p class="title">{{item.activity_name}}</p>
      <div class="main">
        <div class="flex between">
          <span>开始时间</span>
          <span>{{item.start_date}}</span>
        </div>
        <div class="flex between" style="margin-top: 0.5rem; margin-bottom: 0.5rem;">
          <span>结束时间</span>
          <span>{{item.end_date}}</span>
        </div>

        <p class="target_value">参与区间：{{item.min_limit}}-{{item.max_limit}}</p>

        <van-progress :percentage="(item.total_sign_value/item.target_value)*100" color="#F4B619" pivot-text="" />
        <div class="limit">
          <!-- <p>参与额度：{{item.min_limit}}-{{item.max_limit}}</p> -->
          <p class="progress-num">{{((item.total_sign_value/item.target_value)*100).toFixed(2)}}%</p>
        </div>

        <div class="flex between align-center">
          <span v-if="item.status !== 0 ">
              <template v-if="item.is_enable==0">已关闭</template>
              <template v-else>{{ item.status_name}}</template>
          </span>
          <template v-if="item.status == 0 && item.is_enable==0">已关闭</template>
          <van-count-down :time="fun.getTimeDifference(item.start_time)" @finish="finish"  v-if="item.status == 0 && item.is_enable!==0" >
            <template #default="timeData">
              <span class="block">{{ timeData.days }}</span>
              <span style="margin: 0 0.125rem;">天</span>
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
              <span style="margin-left: 0.3438rem;">后开始</span>
            </template>
          </van-count-down>
          <van-button
            v-if="item.is_enable!==0"
            @click="submit(item)"
            style="padding: 0 0.5rem;"
             type="primary"
            :disabled="item.status!==1"
            :color="item.status == 0 ? '#B8B8B8' : '#FB3435'"
            :class="item.status == 0 ? 'be_about_to' : 'start'" size="mini" round>{{ item.status == 0 ? '即将开始' :item.status==1?'预约':item.status_name}}
          </van-button>
          <van-button
            v-if="item.is_enable==0"
            style="padding: 0 0.5rem;"
            type="primary"
            disabled
            color="#B8B8B8"
            class="be_about_to" size="mini" round>已关闭
          </van-button>
        </div>

      </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    listData: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      time:new Date()
    }
  },
  methods: {
    submit(data) {
      this.$emit("dialog_sign",data)
    },
    finish(){
      this.$emit("finish")
    }
  }
}
</script>

<style lang="scss" scoped>
.subscribe-component {
  .van-progress {
    height: 0.47rem !important;
  }

  .target_value {
    color: #fb8d19;
    font-size: 0.75rem;
    margin: 0.5rem 0;
  }

  .colon {
    display: inline-block;
    margin: 0 0.125rem;
    color: #ee0a24;
  }

  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #ee0a24;
  }

  .limit {
    margin-top: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fb8d19;
    font-size: 0.75rem;
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 0.9375rem;
    margin-bottom: 0.9375rem;
  }

  .amount {
    text-align: center;
    color: #e42a2a;
    margin: 0.4375rem 0;
  }

  .h21 {
    height: 1.3125rem;
  }

  .align-center {
    align-items: center;
  }

  .between {
    justify-content: space-between;
  }

  .flex {
    display: flex;
  }

  .subscribe {
    background: #fff;
    margin-bottom: 0.75rem;

    .main {
      padding: 0.75rem 0.75rem 0.9375rem;
    }

    .title {
      margin-bottom: 0.9375rem;
      height: 2.1875rem;
      line-height: 2.1875rem;
      color: #333;
      background-color: rgba(255, 243, 232, 1);
    }
  }
}
</style>